<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/head.css"/>
		<script type="text/javascript">
			window.onload=function(){
				
				var btns=document.querySelectorAll(".box .title a");
				var forms=document.querySelectorAll(".box .text form");
//				console.log(btns); 给元素加事件   集合不能加事件
				for (var i = 0; i < btns.length; i++) {  //获取a标签并循环
					btns[i].onclick=function(){//第几个a标签的点击事件
						for (var j = 0; j < btns.length; j++) { //
							console.log(j);
							btns[j].className="";
						}
						this.className="active";
						// 点击时找到idx  给他俩都不显示 
						var idx=this.attributes["data-idx"].value;
						for (var j = 0; j < forms.length; j++) {
							// 这俩循环
							forms[j].style.display="none";
							// 隐藏掉
						}
						forms[idx].style.display="block";
						//显示出来
					}
				}
			}
		</script>
		
	</head>
	<body>
			<header>
				<div class="head">
			
			<div class="line11">
				<span class="log">
					<img src="img/logo/yinLogo.png"/>
				</span>
				<!--ul>(li>a[href=#]{购物须知})*3-->
				<ul>
					
					<li><a class="" href="reding.html">购物须知</a></li>
					<li><a href="#">购物须知</a></li>
					<li><a href="reding.html">购物须知</a></li>
				</ul>
			</div>
			
			<div class="line12">
				<!--span.log+span.search+ul>li*3-->
				<span class="log">
					<img src="img/logo/shop-logo-v1.png"/>
				</span>
				<div>
				<input type="text" class="search"></input>
				<span class="btn"></span>
				</div>
				<ul>
					
					<li><img src="img/icon/avatar.png"/><a href="login.html">登录</a></li>
					<li><a href="#">我的订单</a></li>
					<li><img src="img/icon/cart-logo-v1.png"/><a href="#">购物车</a></li>
				</ul>
				
			</div>
			<hr >
			<div class="line13">
				<!--span.title+ul>(li>a[href=#]{明星周边})*8-->
				<span class="title"><a href="#">艺人分类</a></span>
				<ul>
					<li><a class="active" href="index.html">首页</a></li>
					<li><a href="list.html">专辑</a></li>
					<li><a href="#">明星周边</a></li>
					<li><a href="#">明星同款</a></li>
					<li><a href="#">个护美妆</a></li>
					<li><a href="#">影漫周边</a></li>
					<li><a href="#">食品</a></li>
					<li><a href="#">服装配饰</a></li>
				</ul>
				
			</div>
			
		</div>
			</header>
		<div class="content">
			<div class="box">
				<div class="right">
				<div class="title">
					<!--a[href=#]{登录}-->
					<a href="#" class="active" data-idx="0">登录</a>
					<a href="#" data-idx="1">注册</a>
				</div>
				<div class="text">					
				<form action="#" method="get">
					<div>
						<input type="text" name="name" placeholder="请输入手机号码或邮箱" id="name" value="" />
					</div>
					<div>
						<input type="password" placeholder="请输入密码" name="pwd" id="pwd" value="" />
					</div>
					<div>
						<input type="checkbox" name="chk" id="chk" value="" />
						<label for="chk">自动登录</label>
					</div>
					<div>
							<input type="submit" value="登录"/>
					</div>
				
				</form>
				
				<form action="#" method="get" class="two">
					<div>
						<input type="text" name="" id="" value="" placeholder="请输入手机号码或邮箱"/>
					</div>
					<div>
						<input type="text" name="" id="" value="" placeholder="请输入密码"/>
					</div>
					<div>
						<input type="text" name="" id="" value="" placeholder="请输入验证码" />
						<input type="button" name="" id="" value="获取验证码" />
					</div>
					<div>
						<input type="submit" value="立即注册"/>
					</div>
					<div>
						<input type="checkbox" name="zhuce"  value="" />
						<label for="zhuce">我以阅读并同意<a href="#">《音悦Tai服务条款》</a></label>
					</div>
					
				</form>
				
			</div>
				</div>
				
			</div>
			
		</div>
	</body>
</html>
